<template>
  <div class="vx-result-step">
    <div class="line"></div>
    <div class="step-list">
      <div class="step" v-for="(item, index) in list" :key="index">
        <div class="step-status">
          <img class="status-img" v-if="item.status == '2'" :src="require(`@/assets/image/theme/${activeName}/auditWaiting.png`)" alt="" />
          <img class="status-img" v-else-if="item.status == '16'" :src="require(`@/assets/image/theme/${activeName}/auditSuccess.png`)" alt="" />
          <img class="status-img" v-else-if="item.status == '3' || item.status == '4'" src="@/assets/image/common/auditError.png" alt="" />
          <img class="status-img" v-else src="@/assets/image/common/auditWaitingNo.png" alt="" />
          <div class="step-title step-title-waiting" v-if="item.status == '1' || !item.status">
            {{ item.title }}
          </div>
          <div class="step-title" v-else>
            {{ item.title }}
          </div>
        </div>
        <div class="step-body" v-if="index == 0">
          <p v-if="item.name">交易名称：{{ item.name }}</p>
          <p v-if="item.serialNum">交易流水号：{{ item.serialNum | formatStringFilter }}</p>
          <p v-if="item.username">录入员：{{ item.username }}</p>
          <p v-if="item.time">制单时间：{{ item.time }}</p>
          <p v-if="item.revokeTime">撤销时间：{{ item.revokeTime }}</p>
        </div>
        <div class="step-body" v-if="index == 1">
          <div class="auditor" v-for="(val, key) in item.list" :key="'level' + key">
            <img v-if="val.status == '13' || val.status == '16'" :src="require(`@/assets/image/theme/${activeName}/auditSuccess.png`)" alt="" />
            <img
              v-if="val.status == '3' || val.status == '4' || val.status == '5' || val.status == '6' || val.status == '17'"
              src="@/assets/image/common/auditError.png"
              alt=""
            />
            {{ $msg('authLevelDict')[val.level] }}级审核员 {{ val.name }}
            {{ val.tradeTime || $msg('dealStateDict')[val.state] }}
            <p class="reason audit-reason" v-if="val.reason">{{ $msg('stepStateDict')[val.status] }}原因：{{ val.reason }}</p>
            <p v-if="val.deadline">距审核截止时间还剩：{{ val.deadline }}</p>
          </div>
        </div>
        <div class="step-body" v-if="index == 2">
          <p v-if="item.bank">落地银行：{{ item.bank }}</p>
          <p v-if="item.reserveTime">预约时间：{{ item.reserveTime }}</p>
          <p v-if="item.startTime">首次执行时间：{{ item.startTime }}</p>
          <p v-if="item.num">已执行次数：{{ item.num }}</p>
          <p v-if="item.endTime">终止时间：{{ item.endTime }}</p>
          <p v-if="item.status === '3' || item.status === '4'" class="reason">
            银行{{ $msg('stepStateDict')[item.status] }} <span class="mg-lt-8"> {{ item.tradeTime }}</span>
          </p>
          <p class="reason" v-if="item.reason">{{ $msg('stepStateDict')[item.status] }}原因：{{ item.reason }}</p>
        </div>
        <div class="step-body" v-if="index == 3">
          <p>{{ item.desc }}</p>
          <p class="reason" v-if="item.reason">{{ $msg('stepStateDict')[item.status] }}原因：{{ item.reason }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
  name: 'vx-result-step',
  props: {
    resultInfo: {
      type: Object,
      default: null,
    },
    name: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      list: undefined,
      newResultInfo: {
        step1: {},
        step2: {},
        step3: {},
        step4: {},
      },
    };
  },
  computed: {
    ...mapState('vxadmin/theme', ['activeName']),
  },
  watch: {
    resultInfo: {
      async handler(val) {
        await this.$set(this, 'newResultInfo', val);
        this.processData();
      },
      immediate: true,
    },
  },
  methods: {
    processData() {
      if (this.newResultInfo.step1) {
        let status, title;
        if (this.newResultInfo.state === '00') {
          status = 16;
          title = '提交成功';
        } else {
          status = 3;
          title = '提交失败';
        }
        this.list = [
          {
            status: status,
            title: title,
            name: this.name,
            serialNum: this.newResultInfo.serialNum,
            username: this.newResultInfo.step1.username,
            time: this.newResultInfo.step1.tradeTime,
            revokeTime: this.newResultInfo.step1.revokeTime,
          },
          {
            status: this.newResultInfo.step2.status,
            title: '公司审核',
            list: this.newResultInfo.step2.list,
          },
          {
            title: '银行处理',
            status: this.newResultInfo.step3.status,
            bank: this.newResultInfo.step3.bank,
            reserveTime: this.newResultInfo.step3.reserveTime,
            tradeTime: this.newResultInfo.step3.tradeTime,
            reason: this.newResultInfo.step3.reason,
            num: this.newResultInfo.step3.num,
          },
          {
            title: '交易结果',
            status: this.newResultInfo.step4.status,
            desc: this.newResultInfo.step4.desc,
            reason: this.newResultInfo.step4.reason,
          },
        ];
      }
    },
  },
};
</script>
<style lang="scss">
.vx-result-step {
  position: relative;
  padding: 30px 0;
  .line {
    position: absolute;
    top: 54px;
    width: 90%;
    left: 0;
    background-color: $color-primary;
    height: 1px;
  }
  .step-list {
    width: 100%;
    display: flex;
    justify-content: space-between;
    position: relative;
    .step {
      .step-status {
        padding: 10px 20px 10px 60px;
        position: relative;
        background-color: #fff;
        display: inline;
        .status-img {
          width: 24px;
          height: 24px;
          position: absolute;
          top: 5px;
          left: 20px;
        }
        .step-title {
          color: $color-primary;
          font-size: 16px;
          font-weight: 600;
          position: relative;
          line-height: 48px;
          display: inline;
          &.step-title-waiting {
            color: #c3c3c3;
          }
        }
      }
      .step-body {
        color: #999;
        padding-left: 60px;
        p {
          font-size: 13px;
        }
        .auditor {
          margin-left: -50px;
          padding-left: 50px;
          position: relative;
          img {
            width: 15px;
            height: 15px;
            vertical-align: middle;
            position: absolute;
            left: 15px;
            top: 3px;
          }
        }
        .reason {
          color: #d11212;
        }
      }
    }
    .step:last-child {
      padding-right: 15px;
    }
  }
}
</style>
